<template>
  <CDialog
    title="选择模型创建报告"
    size="default"
    v-model:visible="dialogVisible"
    :loading="loading"
    :footer="false"
  >
    <div class="model-select-dialog-container">
      <div class="g-flex-between-center">
        <el-input
          placeholder="产品编码或名称"
          v-model="searchText"
          style="width: 320px"
          clearable
          :suffix-icon="CIconSearch"
          @input="handleSearch"
        >
        </el-input>
        <div id="model-select-header-right"></div>
      </div>
      <CTable ref="modelSelectTableRef" v-bind="tableOptions">
        <vxe-column show-overflow="tooltip" width="552">
          <template #default="scope">
            <CTableColumn :main-text="scope.row.modelName" :sub-text="scope.row.modelName">
              <template #mainTextRight>
                <el-tag class="g-ml4" type="info">编码：{{ scope.row.modelCode }}</el-tag>
              </template>
              <template #subText>
                <div class="g-flex-start-center">
                  <span class="select-model-dialog-sub-text">核算标准：乘用车PCR</span>
                  <el-divider
                    class="select-model-dialog-sub-divider"
                    direction="vertical"
                  ></el-divider>
                  <span class="select-model-dialog-sub-text">核算年份：2022年</span>
                  <el-divider
                    class="select-model-dialog-sub-divider"
                    direction="vertical"
                  ></el-divider>
                  <span class="select-model-dialog-sub-text">产品碳足迹：300 kgCO₂e/km</span>
                </div>
              </template>
            </CTableColumn>
          </template>
        </vxe-column>
        <vxe-column width="80">
          <template #default="scope">
            <el-button type="primary" text @click="handleConfirm(scope.row)">选择</el-button>
          </template>
        </vxe-column>
      </CTable>
    </div>
  </CDialog>
</template>

<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits, computed, ref } from 'vue';
import { CDialog } from '@/components/CDialog';
import { CTable, CTableColumn, CTableProps } from '@/components/CTable';
import CIconSearch from '@/components/CIconSearch/index.vue';
import { debounce } from 'lodash';
import { ProcessStageCodeEnum, ProcessStageMap } from '@/constants/enum';

interface ModelSelectDialogProps {
  visible: boolean;
}
const props = withDefaults(defineProps<ModelSelectDialogProps>(), {});
const emits = defineEmits(['update:visible', 'select']);
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emits('update:visible', val);
  }
});
const loading = ref(false);
/**
 * 搜索文本
 */
const searchText = ref();
/**
 * table ref
 */
const modelSelectTableRef = ref();
/**
 * 搜索
 */
const handleSearch = debounce(() => {
  modelSelectTableRef.value?.refresh();
}, 600);
/**
 * 加载数据
 */
async function loadData() {
  return new Promise(resolve => {
    resolve({
      records: [
        {
          id: 1,
          modelNo: '222',
          modelName: '领克09 (高配版)领克09',
          modelCode: 'cxwcxwcxwcxwcxw',
          stageList: [
            {
              stageCode: ProcessStageCodeEnum.SUPPLY_CHAIN_STAGE,
              stageName: ProcessStageMap[ProcessStageCodeEnum.SUPPLY_CHAIN_STAGE],
              totalValue: 412
            }
          ]
        },
        {
          id: 2,
          modelNo: '333',
          modelName: '领克09 (高配版)领克09 (高配版)领克09 (高配版)领克09 (高配版)领克09 (高配版)',
          modelCode: 'cxw',
          stageList: [
            {
              stageCode: ProcessStageCodeEnum.SUPPLY_CHAIN_STAGE,
              stageName: ProcessStageMap[ProcessStageCodeEnum.SUPPLY_CHAIN_STAGE],
              totalValue: 400
            },
            {
              stageCode: ProcessStageCodeEnum.MANUFACTURE_STAGE,
              stageName: ProcessStageMap[ProcessStageCodeEnum.MANUFACTURE_STAGE],
              totalValue: 300
            }
          ]
        }
      ],
      total: 20,
      pages: 10
    });
  });
}
/**
 * 选择操作
 */
function handleConfirm(row: any) {
  console.log('handleConfirm', row);
  emits('select', row);
  dialogVisible.value = false;
}
/**
 * 表格配置
 */
const tableOptions: CTableProps = {
  pagination: {
    teleport: '#model-select-header-right',
    layout: 'prev, slot, next'
  },
  loadData,
  extraTableOption: {
    showHeader: false,
    rowConfig: { isCurrent: false, isHover: false }
  },
  cellHeightSize: 'large'
};
</script>

<style scoped>
.model-select-dialog-container {
  padding-bottom: 14px;
  .select-model-dialog-sub-text {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7a8a99;
    line-height: 20px;
  }
  .select-model-dialog-sub-divider {
    height: 12px;
    border-color: #ebeff2;
  }
}
</style>
